<template>
  <div class="question-answer">

    <!-- 问答列表 -->
    <ul class="qa-list">
      <li class="qa-item" v-for="(item,index) in commentList" :key="item.commentId">
        <div class="avatar-box">
          <img :src="item.avatar" style="object-fit: cover" alt="">
        </div>
        <div class="qa-content">
          <h3 class="title">
            {{ item.nickname }}
          </h3>
          <p class="answer">
            {{ item.content }}
          </p>
          <p class="qa-bottom">

            <span @click="doLike(item.commentId)" :class="LikeList.indexOf(item.commentId) === -1 ? 'like' : 'like-click'">
              <i class="iconfont">&#xe60c;</i>
              {{ item.like }}
            </span>

            <span>{{ item.reply + ` 评论` }}</span>
            <span @click="AddComment(item.commentId)" class="collapse-comment">{{ `我要评论` }}</span>
            <span v-if="userId === id" style="cursor: pointer" @click="bestAnswer(item.commentId,item.userId)">{{ `采纳为最佳答案` }}</span>
            <span class="time">{{ item.gmtCreate }}</span>
            <span v-if="item.children.length > 0" class="collapse-comment" @click="showNestedComment(item)">查看评论</span>
          </p>

          <!-- 二级评论 可折叠 -->
          <Collapse v-for="nested in item.children">
            <div class="nested-comment"
                 v-show="item.show"
                 :key="nested.commentId">

              <div class="avatar-box">
                <img :src="nested.avatar" alt="" style="object-fit: cover">
              </div>

              <div class="qa-content">
                <h3 class="title">
                  {{ nested.nickname }}
                </h3>
                <p class="answer">
                  {{ nested.content }}
                </p>
                <p class="qa-bottom">
                  <span class="time">{{ nested.gmtCreate }}</span>
                </p>
              </div>
            </div>
          </Collapse>

        </div>
        <div v-if="item.best === 1" class="icon">
          已采纳
        </div>
      </li>

    </ul>

    <div v-if="commentList.length === 0 || commentList === null" class="list-empty">
      <p>暂无回复</p>
    </div>

    <!-- 分页 -->
    <el-pagination
       :current-page="page"
       :page-size="limit"
       :total="total"
       style="padding: 30px 0; text-align: center;"
       layout="total, prev, pager, next, jumper"
       @current-change="fetchData"
    />

    <!-- 问答回复表单 -->
    <CommentForm
       ref="commentForm"
       :questionId="this.$route.params.questionId"
       @onSaveSuccess="fetchData"/>

  </div>
</template>
<script>
  import {getCommentPageList, getQuestionStatus, updateCommentBest} from '@/api/question';
import { doCommentLike,getCommentLikeList } from '@/api/like';
import { mapGetters } from 'vuex';
import CommentForm from '@/pages/question/comment-form'
import Collapse from '@/utils/collapse';

export default {
  props: {
    //提问者id
    userId: {
      type: String,
    },
  },
  data () {
    return {
      questionId: '',
      total: 0, // 总记录数
      page: 1, // 页码
      limit: 8, // 每页记录数
      likeParams:{
        userId: this.id,
        commentId: ''
      },
      commentList:[],
      LikeList:[]
    }
  },
  created () {
    this.fetchData()
  },
  methods: {
    fetchData(page = 1){
      // 当点击分页组件的切换按钮的时候，会传输一个当前页码的参数page
      // 解决分页无效问题

      this.page = page
      this.questionId = this.$route.params.questionId
      this.getLikeList()

      // 获取评论嵌套分页列表
      getCommentPageList(this.page,this.limit,this.questionId).then(result => {
        let { code, data } = result
        if (code === 20000) {
          this.commentList = result.data.rows
          this.total = result.data.total
        }
      })
    },

    //点赞
    doLike(commentId){
      // 判断是否登录
      // 无登录
      if (this.id === ''){
        this.$message.error("请先登录系统！")
        return;
      }
      this.likeParams.userId = this.id
      this.likeParams.commentId = commentId
      doCommentLike(this.$qs.stringify(this.likeParams)).then(result => {
        let {code, message} = result
        if (code === 20000) {
          this.fetchData(this.page)
          this.$message({
            type: 'success',
            message: message
          })
        }
      })
    },

    //采纳为最佳答案
    bestAnswer(commentId,userId){
      //自己的提问不能采纳自己的回答为最佳答案
      if (userId === this.id){
        this.$message.error("采纳失败！不能采纳自身的回复为最佳答案！")
        return
      }

      //判断该问题是否已经有最佳答案
      getQuestionStatus(this.$route.params.questionId).then(result => {
        let {code,data} = result

        if (code === 20000){
          if (result.data.item === 1){
            this.$message.error("采纳失败！该提问已有最佳答案！")
          }

          else {
            this.likeParams.userId = userId
            this.likeParams.commentId = commentId
            this.$confirm('将采纳为最佳答案, 是否继续？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              return updateCommentBest(this.$qs.stringify(this.likeParams))
            }).then((result) => {
              let {code, data} = result
              if (code === 20000){
                this.$message({
                  type: 'success',
                  message: '采纳最佳答案成功！'
                })
                //刷新页面
                window.location.reload()
              }

            }).catch((result) => {
              if (result === 'cancel') {
                this.$message({
                  type: 'info',
                  message: '已取消采纳'
                })
              }
            })
          }
        }

      })
    },

    //问答二级回复
    AddComment(commentId){
      // 判断是否登录
      // 无登录
      if (this.id === ''){
        this.$message.error("请先登录系统！")
        return;
      }
      this.$refs.commentForm.open(commentId)
    },

    //二级回复是否显示
    showNestedComment(item){
      if (!item.show){
        this.$set(item,'show',false)
        item.show = !item.show
      }
      else {
        item.show = !item.show
      }
    },

    //获取用户点赞列表
    getLikeList(){
      // 判断是否登录
      // 无登录
      if (this.id === ''){
        return;
      }

      getCommentLikeList(this.id).then(result => {
        let { code, data } = result
        if (code === 20000){
          this.LikeList = data.items

        }
      })
    },

  },
  components:{
    CommentForm,
    Collapse
  },
  computed: {
    ...mapGetters(
       ['id']
    )
  },
}
</script>
<style lang="stylus" scoped>
  .question-answer
    .qa-search-container
      display: flex;
      align-items: center;
      height: 50px;
      .search-box
        flex: 1;
        position: relative;
        margin-right: 20px;
        padding: 0 60px 0 16px;
        overflow: hidden;
        border: 1px solid #b2b8bd;
        border-radius: 8px;
        box-sizing: border-box;
        background: #fff;
        .iconfont
          position: absolute;
          right: 20px;
          top: 50%;
          transform: translateY(-50%);
          font-size: 30px;
          color: #9199a1;
        .search-input
          width: 100%;
          height: 48px;
          background-color: transparent;
          font-size: 16px;
          line-height: 24px;
          outline: none;
      .search-btn
        flex: 0 0 138px;
        width: 138px;
        height: 48px;
        text-align: center;
        line-height: 48px;
        background-color: #f20d0d;
        border-radius: 24px;
        color: #fff;
        cursor: pointer;
    .qa-filter-container
      margin-top: 24px;
      display: flex;
      align-items: center;
      ul
        flex: 1;
        .filter-item
          display: inline-block;
          margin-right: 48px;
          line-height: 30px;
          font-size: 16px;
          font-weight: 700;
          cursor: pointer;
          &.active
            color: #f20d0d;
            border-bottom: 2px solid #f20d0d;
      .desc
        color: #93999f;
        font-size: 12px;
    .qa-list
      margin-top: 24px;
      .qa-item
        display: flex;
        align-items: flex-start;
        position: relative;
        margin-bottom: 20px;
        padding: 28px 16px;
        background-color: #fff;
        border-radius: 12px;
        box-shadow: 0 0 8px 4px rgba(7,17,27,0.1);
        overflow: hidden;
        .avatar-box
          flex: 0 0 48px;
          margin-right: 20px;
          width: 48px;
          height: 48px;
          & > img
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #eee;
        .qa-content
          flex: 1;
          .title
            line-height: 30px;
            font-size: 16px;
            color: #07111b;
            font-weight: 700;
            padding-top -10px
          & > p
            font-size: 14px;
            color: #545c63;
            line-height: 24px;
            &.answer-status
              .split
                margin: 0 8px 0 8px;
            &.qa-bottom
              margin-top: 10px;
              color: #93999f;
              & > span
                margin-right: 25px;
                &.time
                  float: right;
        .icon
          position: absolute;
          left: 0;
          top: 0;
          width: 120px;
          height: 35px;
          line-height: 50px;
          background-color: #00b43c;
          transform: translate(-50px, -5px) rotate(-45deg);
          text-align: center;
          color: #fff;
          font-size: 12px;
        .like
          padding: 7px 15px;
          border-radius: 18px;
          background-color: rgba(84,92,99,0.1);
          color: #545c63;
          cursor: pointer;
        .like-click
          padding: 7px 15px;
          border-radius: 18px;
          background-color: #00b43c
          color: #ffffff;
          cursor: pointer;
  .nested-comment{
    padding 20px 30px 0px 5px
    display: flex;
  }
  .list-empty
    padding: 10px 0;
    text-align: center;
  .collapse-comment
    cursor pointer;
    color #00b43c;
</style>
